<template>
  <a-drawer destroy-on-close placement="right" :open="props.visible" @close="oncancel" width="25%" @afterOpenChange="queryData">
    <a-row v-if="data.form" justify="center">
      <h1 v-if="data.form.approvType === 'A'">审核</h1>
      <h1 v-if="data.form.approvType === 'B'">取消审核</h1>
      <h1 v-if="data.form.approvType === 'C'">打印审核</h1>
      <h1 v-if="data.form.approvType === 'D'">回收审核</h1>
    </a-row>
    <a-row v-if="data.form" justify="center">
      <a-result v-if="data.form.docStatus === 'X'" status="error" title="审批已拒绝！"></a-result>
      <a-result v-if="data.form.docStatus === 'C'" status="success" title="审批已通过！"></a-result>
      <a-result v-if="data.form.docStatus === 'O'" status="info" title="审批进行中！"></a-result>
    </a-row>

    <a-row v-if="data.form">
      <a-timeline style="width: 100%">
        <a-timeline-item v-for="item in data.form.lista">
          <template #dot>
            <CheckOutlined v-if="item.lineStatus === 'C'" style="font-size: 20px; color: green" />
            <LoadingOutlined v-if="item.lineStatus === 'L'" style="font-size: 20px" />
            <EllipsisOutlined v-if="item.lineStatus === 'O'" style="font-size: 20px" />
            <CloseOutlined v-if="item.lineStatus === 'X'" style="font-size: 20px; color: red" />
          </template>
          <a-row justify="space-between">
            <a-col :span="12">
              <h3>{{ item.phaseName }}</h3>
            </a-col>
          </a-row>
          <a-row justify="space-between">
            <h3>{{ item.beginDate }}</h3>
            <h3>{{ item.userName }}</h3>
          </a-row>
          <a-row> </a-row>
          <a-row>
            <p>{{ item.freeTxt }}</p>
          </a-row>

          <a-row>
            <a-textarea v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X' && data.form.docStatus !== 'C'" v-model:value="data.form.freeTxt"></a-textarea>
          </a-row>

          <a-row style="margin-top: 20px">


            <a-button-group v-if="data.form.docStatus !== 'C'" status="warning">
              <a-button
                :disabled="!(item.userId === userStore.$state.employeeId)"
                v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X'"
                @click="handleOk(item, 'A')"
                type="primary"
                >通过
              </a-button>
              <a-button
                :disabled="!(item.userId === userStore.$state.employeeId)"
                v-if="data.form.approvLineNum === item.lineNum && item.lineStatus !== 'X'"
                @click="handleOk(item, 'B')"
                danger
                type="primary"
                >拒绝
              </a-button>
              <a-popconfirm title="确认撤消当前审批吗?" ok-text="确认" cancel-text="取消" @confirm="onClose">
                <a-button v-if="data.form.approvLineNum === item.lineNum">撤销</a-button>
              </a-popconfirm>
            </a-button-group>
          </a-row>
        </a-timeline-item>
      </a-timeline>
    </a-row>
  </a-drawer>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { approvordApi } from '/@/api/business/erp/approvord-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/system/user';

  const userStore = useUserStore();
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    onClose: {
      type: Function,
    },
    approvedData: {
      tabName: {
        type: Number,
        default: 0,
      },
      baseEntry: {
        type: Number,
        default: 0,
      },
      approvType: {
        type: String,
      },
      type: Object,
    },
  });

  const router = useRouter();
  const queryFormState = {
    pageNum: 1,
    pageSize: 10,
    tabName: null,
    baseEntry: null,
  };
  const data = reactive({
    selectDocEntrys: [],
    list: [],
    tableList: [{}],
    form: { approvType: 'A' },
    loading: false,
    open: false,
  });
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 表格加载loading
  const tableLoading = ref(false);
  // 表格数据
  const tableData = ref(false);
  // 总数
  const total = ref(0);

  function onOk() {
    props.onClose(data.list);
  }

  function open() {}

  function oncancel() {
    props.onClose();
  }

  // 查询数据
  async function queryData() {
    queryForm.baseEntry = props.approvedData.baseEntry;
    queryForm.tabName = props.approvedData.tabName;
    try {
      let queryResult = await approvordApi.info(queryForm);
      data.form = queryResult.data[0];
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  function onClose() {
    approvordApi.delete(data.form.docEntry).then((res) => {
      queryData();
    });
  }

  function handleOk(item, type) {
    item.freeTxt = data.form.freeTxt;

    if (type === 'A') {
      approvordApi.update(data.form).then((res) => {
        if (res.code === 0) {
          queryData();
          data.open = false;
        }
      });
    } else {
      data.form.docStatus = 'X';
      approvordApi.update(data.form).then((res) => {
        if (res.code === 0) {
          queryData();
          data.open = false;
        }
      });
    }
  }

  function getTitle(item) {
    if (item === 'A') {
      return '审核';
    } else if (item === 'B') {
      return '取消审核';
    } else if (item === 'C') {
      return '打印审核';
    } else if (item === 'D') {
      return '回收审核';
    }
  }

  onMounted(() => {
    queryData();
  });
</script>
